refactor(components): rewrite PostsList component

* remove NoResults component and move logic to Search page
* add a usePostsList hook
* remove Pagination from PostsList (it is only used if javascript is
disabled and not on every posts list)
* replace `byYear` prop with `sortByYear`
* replace `loadMore` prop with `onLoadMore`
* remove `showLoadMoreBtn` (we can use `loadMore` prop instead to
determine if we need to display the button)
* replace `titleLevel` prop with `headingLvl`
* add `firstNewResult` prop to handle focus on the new results when
loading more article (we should not focus a useless span but the item
directly)

1 files changed, 4 insertions, 5 deletions

diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index bb97f47..61d105e 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -20,6 +20,7 @@ import {
   getThematicsPreview,
   getTotalThematics,
 } from '../../services/graphql';
+import styles from '../../styles/pages/blog.module.scss';
 import type { NextPageWithLayout, PageLink, Thematic } from '../../types';
 import { ROUTES } from '../../utils/constants';
 import {
@@ -128,7 +129,6 @@ const ThematicPage: NextPageWithLayout<ThematicPageProps> = ({
     id: '/42Z0z',
   });
   const pageUrl = `${website.url}${asPath}`;
-  const postsListBaseUrl = `${ROUTES.THEMATICS.INDEX}/page/`;
 
   return (
     <>
@@ -197,11 +197,10 @@ const ThematicPage: NextPageWithLayout<ThematicPageProps> = ({
               )}
             </Heading>
             <PostsList
-              baseUrl={postsListBaseUrl}
-              byYear={true}
+              className={styles.list}
               posts={getPostsWithUrl(articles)}
-              titleLevel={3}
-              total={articles.length}
+              headingLvl={3}
+              sortByYear
             />
           </>
         ) : null}